<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>
</h:head>
<h:body>
	<p:layout fullPage="true">

		<p:layoutUnit position="north" size="115">
			<table border="0" width="100%">
				<tr>
					<td><h:form>
							<p:tabMenu activeIndex="1">
								<p:menuitem value="Map" url="/index.xhtml" icon="ui-icon-image" />
								<p:menuitem value="Statistics" url="/stat.xhtml"
									icon="ui-icon-signal" />
								<p:menuitem value="Top Videos" url="/top.xhtml"
									icon="ui-icon-video" />
								<p:menuitem value="All Posts/Videos" url="/list_all.xhtml"
									icon="ui-icon-star" />
								<p:menuitem value="Wiki"
									url="http://smm.informatik.haw-hamburg.de:11000/wiki/en/Main"
									icon="ui-icon-wrench" />
							</p:tabMenu>
						</h:form></td>
					<td width="10%"><h:outputLink
							value="http://www.gnu.org/licenses/lgpl" title="lgpl">
							<h:graphicImage
								value="http://www.gnu.org/graphics/lgplv3-147x51.png"
								height="50" style="border: 0px" />
						</h:outputLink></td>
				</tr>
				<tr>
					<td colspan="2"><center>
							<h:outputText id="Title"
								value="Open-Source Social Media Monitoring Toolbox" />
						</center></td>
				</tr>
			</table>
		</p:layoutUnit>

		<p:layoutUnit position="west" size="255" header="Streams"
			resizable="true" closable="true" collapsible="true">
			<h:form>
				<p:selectManyButton value="#{streamList.selectedOptions}">
					<f:selectItem itemLabel="Twitter"
						itemValue="#{streamList.getTwitter()}" />
					<f:selectItem itemLabel="YouTube"
						itemValue="#{streamList.getYoutube()}" />
					<p:ajax update=":lay" listener="#{streamList.updateList(ae)}"
						event="change" />
				</p:selectManyButton>
			</h:form>
			<h:form id="lay">
				<p:panelGrid columns="1">
					<p:row>
						<h:outputLabel for="cal1" value="from" style="font-weight:bold" />
						<p:calendar value="#{chartLineBean.from}" id="cal1"
							showButtonPanel="true" />
					</p:row>
					<p:row>
						<h:outputLabel for="cal2" value="to " style="font-weight:bold" />
						<p:calendar value="#{chartLineBean.to}" id="cal2"
							showButtonPanel="true" />
					</p:row>
				</p:panelGrid>

				<p:selectOneRadio id="options" value="#{chartLineBean.period}">
					<f:selectItem itemLabel="Days" itemValue="1" />
					<f:selectItem itemLabel="Months" itemValue="30" />
					<f:selectItem itemLabel="Years" itemValue="360" />
				</p:selectOneRadio>



				<p:selectOneListbox id="basic" value="#{streamList.id}">
					<f:selectItems value="#{streamList.streams}" var="stream"
						itemLabel="#{stream.getStreamName()}"
						itemValue="#{stream.getStreamName()}" />

				</p:selectOneListbox>

				<p:commandButton id="submitButton" value="Refresh"
					update=":stackedgroup">
					<f:actionListener
						binding="#{chartLineBean.updateLineChart(ae,streamList.id, chartLineBean.period, chartLineBean.from, chartLineBean.to)}" />
				</p:commandButton>

			</h:form>



		</p:layoutUnit>


		<p:layoutUnit position="center">
			<div align="right">
				<h:outputLink value="http://www.alchemyapi.com"
					title="alchemyAPI logo">
					<h:graphicImage
						value="http://www.alchemyapi.com/sites/default/files/alchemyAPI.png"
						width="100" />
				</h:outputLink>
			</div>
			<h:panelGroup id="stackedgroup">
				<p:lineChart id="linear" value="#{chartLineBean.linearModel}"
					legendPosition="e" title="Sentiment over import time"
					seriesColors="5882FA" animate="true" minY="-1" maxY="1"
					xaxisLabel="Time | Selected interval" xaxisAngle="90"
					yaxisLabel="-1: negative | +1: positive" escape="false" />
			</h:panelGroup>


		</p:layoutUnit>



	</p:layout>
</h:body>
</html>